<template>
  <el-popover placement="bottom-start" ref="popoverRef" popper-class="!y-w-72 md:!y-w-80 lg:!y-w-96" trigger="click">
    <span slot="reference">
      <el-input v-model='formData' :placeholder='comPlaceholder'>
        <template slot="prepend" v-if="formData"><i class="y-text-base" :class="formData" /></template>
      </el-input>
    </span>
    <div class="iconList">
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="(item) in list" :key="item.label" :name="item.label" :label="item.label">
          <el-scrollbar wrap-class="!y-overflow-x-hidden">
            <span class="icon" v-for="item in item.list" :key="item">
              <i :key="item" :class="[ item]" @click="setIcon(item)"></i>
            </span>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "yySelectIcon",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  computed: {
    formData: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    comPlaceholder() {
      return this.$attrs.placeholder || "";
    },
  },
  data() {
    return {
      activeName: "线框",
      list: [
        {
          label: "线框",
          list: [
            "el-icon-eleme",
            "el-icon-delete",
            "el-icon-setting",
            "el-icon-user",
            "el-icon-phone-outline",
            "el-icon-more-outline",
            "el-icon-star-off",
            "el-icon-goods",
            "el-icon-warning-outline",
            "el-icon-zoom-in",
            "el-icon-zoom-out",
            "el-icon-remove-outline",
            "el-icon-circle-plus-outline",
            "el-icon-circle-check",
            "el-icon-circle-close",
            "el-icon-help",
            "el-icon-minus",
            "el-icon-plus",
            "el-icon-check",
            "el-icon-close",
            "el-icon-picture-outline",
            "el-icon-picture-outline-round",
            "el-icon-upload2",
            "el-icon-download",
            "el-icon-camera",
            "el-icon-video-camera",
            "el-icon-bell",
            "el-icon-bottom-left",
            "el-icon-bottom-right",
            "el-icon-back",
            "el-icon-right",
            "el-icon-bottom",
            "el-icon-top",
            "el-icon-top-left",
            "el-icon-top-right",
            "el-icon-arrow-left",
            "el-icon-arrow-right",
            "el-icon-arrow-down",
            "el-icon-arrow-up",
            "el-icon-d-arrow-left",
            "el-icon-d-arrow-right",
            "el-icon-video-pause",
            "el-icon-video-play",
            "el-icon-refresh",
            "el-icon-refresh-right",
            "el-icon-refresh-left",
            "el-icon-finished",
            "el-icon-sort",
            "el-icon-sort-up",
            "el-icon-sort-down",
            "el-icon-rank",
            "el-icon-loading",
            "el-icon-view",
            "el-icon-c-scale-to-original",
            "el-icon-date",
            "el-icon-edit",
            "el-icon-edit-outline",
            "el-icon-folder",
            "el-icon-folder-opened",
            "el-icon-folder-add",
            "el-icon-folder-remove",
            "el-icon-folder-delete",
            "el-icon-folder-checked",
            "el-icon-tickets",
            "el-icon-document-remove",
            "el-icon-document-delete",
            "el-icon-document-copy",
            "el-icon-document-checked",
            "el-icon-document",
            "el-icon-document-add",
            "el-icon-printer",
            "el-icon-paperclip",
            "el-icon-takeaway-box",
            "el-icon-search",
            "el-icon-monitor",
            "el-icon-attract",
            "el-icon-mobile",
            "el-icon-scissors",
            "el-icon-umbrella",
            "el-icon-headset",
            "el-icon-brush",
            "el-icon-mouse",
            "el-icon-coordinate",
            "el-icon-magic-stick",
            "el-icon-reading",
            "el-icon-data-line",
            "el-icon-data-board",
            "el-icon-pie-chart",
            "el-icon-data-analysis",
            "el-icon-collection-tag",
            "el-icon-film",
            "el-icon-suitcase",
            "el-icon-suitcase-1",
            "el-icon-receiving",
            "el-icon-collection",
            "el-icon-files",
            "el-icon-notebook-1",
            "el-icon-notebook-2",
            "el-icon-toilet-paper",
            "el-icon-office-building",
            "el-icon-school",
            "el-icon-table-lamp",
            "el-icon-house",
            "el-icon-no-smoking",
            "el-icon-smoking",
            "el-icon-shopping-cart-full",
            "el-icon-shopping-cart-1",
            "el-icon-shopping-cart-2",
            "el-icon-shopping-bag-1",
            "el-icon-shopping-bag-2",
            "el-icon-sold-out",
            "el-icon-sell",
            "el-icon-present",
            "el-icon-box",
            "el-icon-bank-card",
            "el-icon-money",
            "el-icon-coin",
            "el-icon-wallet",
            "el-icon-discount",
            "el-icon-price-tag",
            "el-icon-news",
            "el-icon-guide",
            "el-icon-male",
            "el-icon-female",
            "el-icon-thumb",
            "el-icon-cpu",
            "el-icon-link",
            "el-icon-connection",
            "el-icon-open",
            "el-icon-turn-off",
            "el-icon-set-up",
            "el-icon-chat-round",
            "el-icon-chat-line-round",
            "el-icon-chat-square",
            "el-icon-chat-dot-round",
            "el-icon-chat-dot-square",
            "el-icon-chat-line-square",
            "el-icon-message",
            "el-icon-postcard",
            "el-icon-position",
            "el-icon-turn-off-microphone",
            "el-icon-microphone",
            "el-icon-close-notification",
            "el-icon-bangzhu",
            "el-icon-time",
            "el-icon-odometer",
            "el-icon-crop",
            "el-icon-aim",
            "el-icon-switch-button",
            "el-icon-full-screen",
            "el-icon-copy-document",
            "el-icon-mic",
            "el-icon-stopwatch",
            "el-icon-medal-1",
            "el-icon-medal",
            "el-icon-trophy",
            "el-icon-trophy-1",
            "el-icon-first-aid-kit",
            "el-icon-discover",
            "el-icon-place",
            "el-icon-location",
            "el-icon-location-outline",
            "el-icon-location-information",
            "el-icon-add-location",
            "el-icon-delete-location",
            "el-icon-map-location",
            "el-icon-alarm-clock",
            "el-icon-timer",
            "el-icon-watch-1",
            "el-icon-watch",
            "el-icon-lock",
            "el-icon-unlock",
            "el-icon-key",
            "el-icon-service",
            "el-icon-mobile-phone",
            "el-icon-bicycle",
            "el-icon-truck",
            "el-icon-ship",
            "el-icon-basketball",
            "el-icon-football",
            "el-icon-soccer",
            "el-icon-baseball",
            "el-icon-wind-power",
            "el-icon-light-rain",
            "el-icon-lightning",
            "el-icon-heavy-rain",
            "el-icon-sunrise",
            "el-icon-sunrise-1",
            "el-icon-sunset",
            "el-icon-sunny",
            "el-icon-cloudy",
            "el-icon-partly-cloudy",
            "el-icon-cloudy-and-sunny",
            "el-icon-moon",
            "el-icon-moon-night",
            "el-icon-dish",
            "el-icon-dish-1",
            "el-icon-food",
            "el-icon-chicken",
            "el-icon-fork-spoon",
            "el-icon-knife-fork",
            "el-icon-burger",
            "el-icon-tableware",
            "el-icon-sugar",
            "el-icon-dessert",
            "el-icon-ice-cream",
            "el-icon-hot-water",
            "el-icon-water-cup",
            "el-icon-coffee-cup",
            "el-icon-cold-drink",
            "el-icon-goblet",
            "el-icon-goblet-full",
            "el-icon-goblet-square",
            "el-icon-goblet-square-full",
            "el-icon-refrigerator",
            "el-icon-grape",
            "el-icon-watermelon",
            "el-icon-cherry",
            "el-icon-apple",
            "el-icon-pear",
            "el-icon-orange",
            "el-icon-coffee",
            "el-icon-ice-tea",
            "el-icon-ice-drink",
            "el-icon-milk-tea",
            "el-icon-potato-strips",
            "el-icon-lollipop",
            "el-icon-ice-cream-square",
            "el-icon-ice-cream-round",
          ],
        },
        {
          label: "实心",
          list: [
            "el-icon-platform-eleme",
            "el-icon-delete-solid",
            "el-icon-s-tools",
            "el-icon-user-solid",
            "el-icon-phone",
            "el-icon-more",
            "el-icon-star-on",
            "el-icon-s-goods",
            "el-icon-warning",
            "el-icon-question",
            "el-icon-info",
            "el-icon-remove",
            "el-icon-circle-plus",
            "el-icon-success",
            "el-icon-error",
            "el-icon-s-help",
            "el-icon-picture",
            "el-icon-upload",
            "el-icon-camera-solid",
            "el-icon-video-camera-solid",
            "el-icon-message-solid",
            "el-icon-s-cooperation",
            "el-icon-s-order",
            "el-icon-s-platform",
            "el-icon-s-fold",
            "el-icon-s-unfold",
            "el-icon-s-operation",
            "el-icon-s-promotion",
            "el-icon-s-home",
            "el-icon-s-release",
            "el-icon-s-ticket",
            "el-icon-s-management",
            "el-icon-s-open",
            "el-icon-s-shop",
            "el-icon-s-marketing",
            "el-icon-s-flag",
            "el-icon-s-comment",
            "el-icon-s-finance",
            "el-icon-s-claim",
            "el-icon-s-custom",
            "el-icon-s-opportunity",
            "el-icon-s-data",
            "el-icon-s-check",
            "el-icon-s-grid",
            "el-icon-menu",
            "el-icon-share",
            "el-icon-d-caret",
            "el-icon-caret-left",
            "el-icon-caret-right",
            "el-icon-caret-bottom",
            "el-icon-caret-top",
          ],
        },
      ],
    };
  },
  methods: {
    setIcon(val) {
      this.formData = val;
      this.$refs.popoverRef.doClose();
    },
  },
};
</script>

<style scoped lang="scss">
.iconList {
  .el-tab-pane {
    .el-scrollbar {
      height: 220px;
      .icon {
        display: inline-block;
        width: calc((100% - 60px) / 6);
        height: 40px;
        border: 1px solid #ededed;
        text-align: center;
        box-sizing: border-box;
        line-height: 38px;
        margin-right: 10px;
        border-radius: 3px;
        margin-top: 10px;
        cursor: pointer;
        &:nth-child(-n + 6) {
          margin-top: 0;
        }
        i {
          font-size: 16px;
          color: #303133;
          transition: all 100ms;
        }
        &:hover {
          box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
          i {
            transform: scale(1.5);
          }
        }
      }
    }
  }
}
</style>